Skip to main content

Dark Mode

Setting​

tailwind.config.js
module.exports = {
  darkMode: "class", // add this
  // ...
}
public/index.html
<html lang="en" class="dark">
  // ...
</html>

Using​

using in React
export default function DarkMode() {
  const switchToDark = () => {
    console.log("set dark mode")
    document.documentElement.classList.toggle("dark") // keypoint
  }

  return (
    <div
      className="w-2/3 h-80 text-center bg-green-100 dark:bg-black"
      onClick={switchToDark}
    >
      <h1 className="text-black dark:text-white">Toggle Dark Mode</h1>
    </div>
  )
}